<template>
	<div class="">
		<Header></Header>
		<div class="mui-content">
		<div class="select_city">
			<div @click="to_select_city()">
				<i class="position_icon"></i>
				<span class="title">{{now_city}}</span>
				<i class="bottom_arr_icon"></i>
			</div>
			<div class="city_list" v-show="select_city_is_show">
				<span :class="item.is_active?'city_item active':'city_item'" @click="select_city(item.id,item.name)" v-for="(item,k) in city" :key="k">{{item.name}}</span>
			</div>
		</div>
		<div class="select_area_main">
			<div class="left fl">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!--这里放置真实显示的DOM内容-->
						<ul>
							<li :class="now_areas_types == i?'active':''" v-for="(item,i) in now_areas" :key="i" @click="select_area(item.id,i)">{{item.name}}</li>

						</ul>
					</div>
				</div>
			</div>
			<div class="right fl">

				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!--这里放置真实显示的DOM内容-->
						<ul>
							<li v-for="(item,i) in homes" :key="i" @click="onindex(item)">{{item.name}}</li>
						</ul>
					</div>
				</div>


			</div>
		</div>
	</div>

	</div>
</template>

<script>
	import Header from '../../components/Header'
	import ls from "@/tools/localstorage"
	let mask;
	export default {
	name:'select_area',
	data(){
		return{
			city:[],				//省
			now_areas:[],			//区
			homes:[],				//社区
			now_city: '西安',
			select_city_is_show:false,
			now_areas_types:0,
			type:''
		};
	},
	created(){
        this.$store.commit("change_header",{
            header_text:'切换社区',
            header_right_func:true,
            header_right_html:'',
            header_back_btn:true
        })
    },
	methods:{
		onderurl:function(url,val,type){
			let that = this;
			if(type == 1){
				that.$router.push({path:url,query: { queryId:  val }});
			}else{
				that.$router.push(url);
			}
		},
		to_select_city: function (city_num) {
			let that = this;
			mask.show();//显示遮罩
			that.select_city_is_show = true;

		},
		select_city: function (o,j) {
			let that = this;
			that.$axios.get("api/system/getRegion/pid/"+o+"/type/3").then(res=>{
				that.now_areas = res
			});
			that.select_city_is_show = false;
			that.now_city = j
			mask.close();
			
		},
		select_area: function (area_num,o) {
			let that = this;
			that.now_areas_types = o
			that.$axios.get("api/system/getComm/pid/"+area_num+"/area/"+area_num).then(res=>{
				console.log(res)
				that.homes = res.data
			});
		},
		//获取社区
		onindex:function(item){
			let that = this;
			if(that.type == 1){
				console.log('修改绑定社区')
			}else{
				console.log('切换社区')
			}
			var arr = {"name":item.name,"id":item.id,sqid:item.id}
			// 更新本地缓存数据
			ls.set("community",arr);
			// 更新状态管理中的数据
			this.$store.commit("up_data_community",arr)
			this.$router.go(-1)
		}	
	},
	mounted(){
		let that = this;
		mui.init({});
		//判断0切换社区  1绑定社区
		that.type = that.$route.query.type?that.$route.query.type:0;			
		//that.$store.state.count = '666'dir
		//console.log(that.$store.state.count,'$store.state6')
		mask = mui.createMask(function () {
			that.select_city_is_show = false;
		});
		that.$axios.get("api/system/getRegion/pid/24/type/2").then(res=>{
			that.city = res
			that.$axios.get("api/system/getRegion/pid/"+that.city[0].id+"/type/3").then(res=>{
				that.now_areas = res
				that.$axios.get("api/system/getComm/pid/"+that.now_areas[0].id+"/area/"+that.now_areas[0].id).then(res=>{
					console.log(res)
					that.homes = res.data
					
				});
				
			});
		});
		mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		});
	},
    components:{
        Header
    }
}
</script>

<style lang="less" scoped>
@import "../../../static/pxvalue.less";
@import "../../assets/less/index/select_area.less";
</style>